<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 16:20:16
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 15:46:02
 * @FilePath: /bangand-low-code/src/layouts/components/LayoutMenu.vue
 * @Description: 菜单
-->
<template>
  <div class="p-layout-menu">
    <a-menu
      :mode="isHorizontal ? 'horizontal' : 'inline'"
      :class="[navTheme]"
      :selectedKeys="selectedKeys"
      :openKeys="openKeys"
      @select="handleMenuSelect"
      @openChange="handleOpenChange"
      v-bind="getInlineCollapseOptions"
    >
      <template v-for="item in menus">
        <SubMenuItem :item="item" :key="item.path" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import Vue from 'vue';
import { objectUtils, regexpUtils } from '@/utils';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';
import SubMenuItem from './SubMenuItem.vue';
import { MIX_TOP_MENU_KEY } from '@/store/mutation-types';

export default {
  // 组件的名字或者页面的名字
  name: 'LayoutMenu',
  mixins: [appLatyouMixin],
  // 加载组件
  components: { SubMenuItem },
  // 父级组件传过来的值
  props: {
    // 是否横向显示菜单，顶部菜单横向，左侧菜单纵向
    isHorizontal: {
      type: Boolean,
      default: false
    }
  },
  // 页面数据
  data() {
    return {
      // 当前选中的菜单
      selectedKeys: [],
      // 打开的路径
      openKeys: []
    };
  },
  computed: {
    // 是mix top 菜单
    isMixTopMenu() {
      return this.isMixMode && this.isHorizontal;
    },

    // 菜单
    menus() {
      let routeList = this.$store.getters.addRouters,
        routes = routeList.find((item) => item.path === '/'),
        mainMenu = (routes && routes.children) || [];

      if (this.isMixTopMenu) {
        mainMenu = mainMenu.map(({ component, hidden, meta, name, path }) => {
          return {
            component,
            hidden,
            meta,
            name,
            path
          };
        });
      } else if (this.isMixMode && !this.isHorizontal) {
        let key = this.mixTopMenuKey;
        if (!key) key = this.$route.matched[1]?.path || '';

        let menus = mainMenu.find((v) => v.path == key);
        mainMenu = menus?.children || [];
      }

      return mainMenu;
    },

    // 获取菜单伸缩设置
    getInlineCollapseOptions() {
      let options = {};

      if (!this.isHorizontal) {
        options.inlineCollapsed = this.sideCollapsed;
        options.inlineIndent = 16;
      }

      return options;
    }
  },
  watch: {
    $route() {
      this.updateMenu();
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {
    // 增加默认选中
    this.updateMenu();
  },
  // 方法
  methods: {
    /**
     * @description:
     * @param {*} item
     * @param {*} key
     * @param {*} selectedKeys
     * @return {*}
     */
    handleMenuSelect({ item, key, selectedKeys }) {
      this.selectedKeys = selectedKeys;

      // 外部地址链接
      if (regexpUtils.isExternal(key)) {
        window.open(key, '_blank');
        return;
      }

      if (this.isMixTopMenu) {
        this.$store.commit(`app/${MIX_TOP_MENU_KEY}`, key);
      } else {
        this.$router.push({
          path: key
        });
      }
    },

    /**
     * @description: SubMenu 展开/关闭的回调
     * @param {*} openKeys
     * @return {*}
     */
    handleOpenChange(openKeys) {
      this.openKeys = openKeys;
    },

    /**
     * @description: 菜单更新
     * @return {*}
     */
    updateMenu() {
      // console.log(this.$route);
      const routes = this.$route.matched.concat(),
        last = routes.pop();

      if (this.isMixTopMenu) {
        let key = routes[1]?.path || '';
        this.selectedKeys = [key];
        this.openKeys = [];
        return;
      }

      if (!last) return;
      this.selectedKeys = [last.path];
      // todo: 处理动态路由
      this.openKeys = this.isHorizontal ? [] : routes.map((v) => v.path);
    }
  }
};
</script>

<style lang="less">
.p-layout-menu {
}
</style>
